<template>
    <div style="width: 1000px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="热门榜" name="category">
                <ul class="me-allct-items">

                    <li v-for="(c,index) in historyBook" @click="" :key="c.id" class="me-allct-item">
                        <router-link :to="{name:'bookInformation', params: {id:c.id}}" target="_blank">
                            <div class="me-allct-content">
                                <a class="me-allct-info">
                                    <img class="me-allct-img" :src="c.cover"/>
                                    <h3 class="me-allct-name">第{{index+1}}名 {{c.name}}</h3>
                                    <!--                                        <p class="me-allct-description">{{c.description}}</p>-->
                                </a>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="收藏榜">
                <ul class="me-allct-items">
                    <li v-for="(c,index) in favoriteBook" @click="" :key="c.id" class="me-allct-item">
                        <router-link :to="{name:'bookInformation', params: {id:c.id}}" target="_blank">
                            <div class="me-allct-content">
                                <a class="me-allct-info">
                                    <img class="me-allct-img" :src="c.cover"/>
                                    <h3 class="me-allct-name">第{{index+1}}名 {{c.name}}</h3>
                                    <!--                                        <p class="me-allct-description">{{c.description}}</p>-->
                                </a>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </el-tab-pane>

            <el-tab-pane label="评论榜" name="aaaa">
                <ul class="me-allct-items">
                    <li v-for="(c,index) in messageBook" @click="" :key="c.id" class="me-allct-item">
                        <router-link :to="{name:'bookInformation', params: {id:c.id}}" target="_blank">
                            <div class="me-allct-content">
                                <a class="me-allct-info">
                                    <img class="me-allct-img" :src="c.cover"/>
                                    <h3 class="me-allct-name">第{{index+1}}名 {{c.name}}</h3>
                                    <!--                                        <p class="me-allct-description">{{c.description}}</p>-->
                                </a>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </el-tab-pane>

            <el-tab-pane label="书架榜" name="aaaaa">
                <ul class="me-allct-items">
                    <li v-for="(c,index) in bookrackBook" @click="" :key="c.id" class="me-allct-item">
                        <router-link :to="{name:'bookInformation', params: {id:c.id}}" target="_blank">
                            <div class="me-allct-content">
                                <a class="me-allct-info">
                                    <img class="me-allct-img" :src="c.cover"/>
                                    <h3 class="me-allct-name"> 第{{index+1}}名 {{c.name}}</h3>
                                    <!--                                        <p class="me-allct-description">{{c.description}}</p>-->
                                </a>

                            </div>
                        </router-link>
                    </li>
                </ul>
            </el-tab-pane>

            <el-tab-pane label="最新榜" name="aaqaa">
                <ul class="me-allct-items">
                    <li v-for="(c,index) in newBook" @click="" :key="c.id" class="me-allct-item">
                        <router-link :to="{name:'bookInformation', params: {id:c.id}}" target="_blank">
                            <div class="me-allct-content">
                                <a class="me-allct-info">
                                    <img class="me-allct-img" :src="c.cover"/>
                                    <h3 class="me-allct-name">第{{index+1}}名 {{c.name}}</h3>
                                    <!--                                        <p class="me-allct-description">{{c.description}}</p>-->
                                </a>

                            </div>
                        </router-link>
                    </li>
                </ul>
            </el-tab-pane>

        </el-tabs>
        <el-backtop>
            👆
        </el-backtop>
    </div>


</template>
<script>
    import request from "../utils/request";

    export default {
        name: "ranking",
        data() {
            return {
                activeName: 'category',
                historyBook: [],
                favoriteBook: [],
                messageBook: [],
                bookrackBook: [],
                newBook: [],
            };
        },
        created() {
            this.handleClick()
        },
        methods: {
            handleClick() {

                request.get("book/getBookRanking").then(res => {
                    console.log(res)
                    this.historyBook = res.data.historyBook
                    this.favoriteBook = res.data.favoriteBook
                    this.messageBook = res.data.messageBook
                    this.bookrackBook = res.data.bookrackBook
                    this.newBook = res.data.newBook
                })

            },
            handleScroll() {

            }
        }

    };
</script>

<style>
    .me-allct-body {
        margin: 60px auto 140px;
    }

    .me-allct-container {
        width: 1000px;
    }

    .me-allct-items {
        padding-top: 2rem;
    }

    .me-allct-item {
        width: 25%;
        display: inline-block;
        margin-bottom: 2.4rem;
        padding: 0 .7rem;
        box-sizing: border-box;
    }

    .me-allct-content {
        display: inline-block;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        transition: border-color .3s;
        text-align: center;
        padding: 1.5rem 0;
    }

    .me-allct-info {
        cursor: pointer;
    }

    .me-allct-img {
        margin: -40px 0 10px;
        width: 130px;
        height: 180px;
        vertical-align: middle;
        border-radius: 5%;

    }

    .me-allct-name {
        font-size: 14px;
        /*font-weight: 150;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 4px;
    }

    .me-allct-description {
        min-height: 50px;
        font-size: 13px;
        line-height: 25px;
    }

    .me-allct-meta {
        font-size: 12px;
        color: #969696;
    }
</style>
